<template>
    <div>
        <div class="details_title">
            <p class="title">{{loveList.title}}</p>
            <div class="title_info">
                <div class="title_info_ips">
                    <div>
                        <img :src="loveList.head_photo" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                    </div>
                    <span>{{loveList.org_name}}</span>
                    <span>{{loveList.create_time | time }}</span>
                </div>
                <!--<div class="title_info_collection"  v-if="!loveList.is_collection_id" @click="isCollection">-->
                    <!--<img src="@as/img/tongzhi_shoucanghou@2x.png" alt="">-->
                    <!--<span>收藏</span>-->
                <!--</div>-->
                <!--<div class="title_info_collection" style="background: #F6F6F6;" v-if="loveList.is_collection_id" @click="cancelCollection">-->
                    <!--<img src="@as/img/xuanchuan_shoucanghou_set.png" alt="">-->
                    <!--<span style="color: #EB4D44">已收藏</span>-->
                <!--</div>-->

            </div>
        </div>
        <div class="details_content">
            <p>{{loveList.content}}</p>
            <div class="box_img photo1" v-if="photoList.length==1">
                <img :src="item" v-for="(item,index) in photoList" :key="index" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
            </div>
            <div class="box_img photo2" v-if="photoList.length==2">
                <img :src="item" v-for="(item,index) in photoList" :key="index" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
            </div>
            <div class="box_img photo3" v-if="photoList.length==3">
                <img :src="item" v-for="(item,index) in photoList" :key="index" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
            </div>
            <div class="box_img photo4" v-if="photoList.length>3">
                <img :src="item" v-for="(item,index) in photoList" :key="index" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                LoveId: '',//一颗红心id
                loveList: {},//一颗红心id
                photoList: [],//图片列表
                collection_id:'',
                type:'',
                newsId: '',
            }
        },
        mounted() {
            this.LoveId = this.$route.query.id;
            this.type = this.$route.query.type;
            this.$progress.done();
            this.getLoveDetails();
        },
        methods: {
            /*
            * 获取一颗红心详情
            * */
            getLoveDetails(){
                this.$http
                    .get("app/redstar/details", {
                        id: this.LoveId,
                    })
                    .then(res => {
                        if(res.code==200){
                            this.loveList = res.data;
                            this.photoList=res.data.photo;
                            if(res.data.collection_id){
                                this.collection_id =res.data.collection_id;
                            };
                        }
                    })
            },
            /*收藏*/
            isCollection() {
                //添加收藏
                this.$http
                    .post("app/NewCustom/collection", {
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                        id: this.loveList.id,
                        type:this.type,
                        resources_type:1,
                    })
                    .then(res => {
                        console.log(res)
                        this.loveList.is_collection_id=1;
                        this.collection_id =res.data.collection_id;
                    });
            },
            /*取消收藏*/
            cancelCollection(){
                this.$http
                    .post("app/NewCustom/cancel_collection", {
                        collection_id:this.collection_id,
                    })
                    .then(res => {
                        this.loveList.is_collection_id =0;
                    });
            }
        },
    }
</script>

<style scoped>
    .details_title{
        width: 343px;
        margin: 0 auto;
    }
    .details_title .title{
        font-size:18px;
        font-weight:bold;
        color:#333;
        line-height:28px;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .title_info{
        margin-top: 10px;
        margin-bottom: 10px;
        color: #999999;
        font-size: 12px;
        display: flex;
        flex-direction: row;

    }
    .title_info .title_info_ips{
        width: 80%;
    }
    .title_info_ips div{
        display: inline-block;
        width: 35px;
        height: 35px;
        float: left;
        margin-right: 10px;
    }
    .title_info_ips img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .title_info_ips span{
        display: flex;
        flex-direction: column;
    }
    .title_info .title_info_collection{
        width:60px;
        height:27px;
        background:linear-gradient(-90deg,rgba(235,77,68,1) 0%,rgba(244,117,72,1) 100%);
        border-radius:13px;
        text-align: center;
        line-height: 28px;

    }
    .title_info .title_info_collection img{
        width: 15px;
        height: 14px;
        position: relative;
        top: 2px;
        left: -4px;
    }
    .title_info .title_info_collection span{
        font-size: 12px;
        color: #fff;
    }
    .details_content{
        width: 343px;
        margin: 0 auto 120px;
        overflow: hidden;
    }
    .details_content p{
        font-size:14px;
        color:#666;
        line-height:25px;
        text-indent: 2em;
        margin-top: 15px;
        word-wrap: break-word;
    }

    .details_content .box_img{
        display: flex;
        flex-flow: wrap;
        width: 100%;
        justify-content:space-between;

    }
    .details_content .photo1 img{
        width:343px;
        height:257px;
        box-sizing: border-box;

    }
    .details_content .photo2 img{
        width:167px;
        height:125px;
        box-sizing: border-box;
    }
    .details_content .photo3 img{
        width:107px;
        height:80px;
        box-sizing: border-box;
    }
    .details_content .photo4 img{
        width:107px;
        height:80px;
        box-sizing: border-box;
    }
    .details_content img{
        width: 100%;
        margin-bottom: 10px;
    }
    .title_info .title_info_collection {
        min-width: 71px;
        background: linear-gradient(-90deg, rgba(235, 77, 68, 1) 0%, rgba(244, 117, 72, 1) 100%);
        border-radius: 13px;
        text-align: center;
        padding: 6px 16px;

    }

    .title_info .title_info_collection img {
        width: 15px;
        height: 14px;
        position: relative;
        top: 2px;
        left: -4px;
    }

    .title_info .title_info_collection span {
        font-size: 12px;
        color: #fff;
    }
</style>